<template>
	<div>
		<div>
			<nuxt-link to="/">
				<button>home</button>
			</nuxt-link>

			<!-- 通过navigateTo -->
			<nuxt-link @click="goToCategory">
				<button>category</button>
			</nuxt-link>

			<button @click="goToCart">cart</button>

			<button @click="back">back</button>
		</div>

		<NuxtPage></NuxtPage>
	</div>
</template>

<script setup>
	const goToCategory = () => {
		// return navigateTo('/category')

		/* return navigateTo(
			{
				path: '/category',
				query: {
					id: 100,
				},
			},
			{
				replace: true,
			}
		) */

		// 返回的promise, 官网建议使用编程式导航是使用return, 或者使用async await
		return navigateTo('http://www.jd.com', {
			external: true,
		})
	}

	// useRoute
	let router = useRouter()
	const goToCart = () => {
		// 官网不建议这样跳转, 官网建议使用navigateTo进行页面的跳转, navigateTo这个可以在浏览器端和服务端同时使用
		router.push('/cart')
	}

	const back = () => {
		router.go(-1)
	}

	// 路由守卫
	router.beforeEach((to, from) => {
		console.log(to)
		console.log(from)
	})
</script>

<style lang="scss" scoped></style>
